<template>
  <div id='upgrade'>
       <com-head :opacity='0'>我要升级</com-head>
      <div class="navimg"  @click="shownav"><img class="img" src="../assets/image/navall.png"></div>
      <div class="gradetop">
          <p>上级账户名称：{{name}}</p>
          <p>上级联系电话：{{tel}}</p>
          <router-link tag="div" :to="{name: 'feedback',query:{id,id}}" class="mes"><i class="iconfont icon-xinfeng"></i></router-link>
      </div>
      <div class="grade">
        <div class="item"><span>账户当前等级</span><input type="text" v-model="grade" readonly></div>
        <div class="item"><span>需升级别</span><input type="text" v-model="gradeto" readonly></div>
        <div class="item"><span>升级打款金额</span><input type="text" v-model="money" readonly></div>
        <div class="item"><span>联系方式</span><input type="text" v-model="phone" placeholder="请输入个人联系方式"></div>
        <!-- <div class="item"><span>二级密码</span><input type="password" v-model="safepsw" placeholder="请输入二级密码"></div> -->
        <div class="item item1"><span>上级收款码</span></div>
        <div class="shoukuanma">
            <div class="box" v-if="img1">
                <div class="img"><img :src="`http://${img1}`"></div>
                <p>微信收款码</p>
            </div>
            <div class="box" v-if="img2">
                <div class="img"><img :src="`http://${img2}`"></div>
                <p>支付宝收款码</p>
            </div>
        </div>
        <div class="item item1"><span>打款凭证</span></div>
        <div class="upload"  @click="portrait">
          <div class="yulan" v-if="img3"><img :src="`http://${img3}`"></div>
            <input class="imginp" ref="portrait" name="imgLocal" id="imgLocal" type='file' accept="image/*" @change="shangchuan"/>
            <div class="box">
            <i class="iconfont icon-tianjia" v-if="!img3"></i>
            <span>上传截图</span>
            </div>
        </div>
        <com-button :click="suregrade"  :disabled="disabled">确定升级</com-button>

      </div>
  </div>
</template>

<script>
export default {
  name: "upgrade",
  data() {
    return {
      disabled: false,
      name: "",
      tel: "",
      grade: "",
      gradeto: "",
      money: "",
      phone: "",
      img1: "",
      img2: "",
      img3: "",
      imgid3: "",
      id: "",
      up: ""
      // safepsw: "",
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.loading();
    });
  },
  computed: {},

  created() {},

  mounted() {},

  methods: {
    loading() {
      this.axios
        .post("apiindex/my_upgrade", {
          token: this.token()
        })
        .then(({ data }) => {
          
          if (data.code === "200") {
            this.name = data.data.parent_user_num;
            this.tel = data.data.pareny_user_phone;
            this.money = data.data.money;
            this.grade = data.data.user_rank;
            this.gradeto = data.data.rank;
            this.img1 = data.data.wechat;
            this.img2 = data.data.alipay;
            this.id = data.data.parent_user_id;
            this.up = data.data.up;
          } else if (data.code === "204") {
            this.$bus.$emit("toast", data.data);
            this.$router.push("userCenter");
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    suregrade() {
      let regTel = /^(1[3-9])\d{9}$/;
      if (this.up == "1") {
        this.$bus.$emit("toast", "审核中，不能重复审核");
      } else if (!this.phone) {
        this.$bus.$emit("toast", "手机号不能为空");
      } else if (!regTel.test(this.phone)) {
        this.$bus.$emit("toast", "手机号码不合法");
      } else {
        this.disabled = true;
        this.axios
          .post("apiindex/do_upgrade", {
            token: this.token(),
            imgurl: this.imgid3,
            parent_id: this.id,
            money: this.money,
            phone: this.phone
            // sale_code: this.safepsw,
          })
          .then(({ data }) => {
            
            if (data.code === "200") {
              this.$router.push("userCenter");
              this.$bus.$emit("toast", data.data);
              this.disabled = false;
            } else if (data.code === "204") {
              this.$bus.$emit("toast", data.data);
              this.disabled = false;
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    },
    // 头像单击事件
    portrait() {
      this.$refs.portrait.click(); // 获取ref为portrait的元素相当于获取id为portrait的元素
    },
    // 上传图片
    shangchuan(e) {
      var self = this;
      let file = e.target.files[0]; // 上传照片
      /* eslint-disable no-undef */
      let formData = new FormData(); // 创建form对象
      formData.append("imgurl", file); // 通过append向form对象添加数据
      // formData.append("token", this.token()); // 添加form表单中其他数据
      console.log(formData.get("imgurl")); // FormData私有类对象，访问不到，可以通过get判断值是否传进去
      let config = {
        emulateJSON: true,
        withCredentials: false,
        headers: { "Content-Type": "multipart/form-data" }
      };
      this.$axios
        .post(
          "http://kuaibb.cadhx.com/index.php/index/apiupload/doupload",
          formData,
          config
        )
        .then(({ data }) => {
          if (data.code === "200") {
            
            this.img3 = data.img;
            this.imgid3 = data.imgid;
          } else if (data.code === "204") {
            this.$bus.$emit("toast", data.data);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    shownav() {
      console.log(1222);
      this.$bus.$emit("navlist");
    }
  }
};
</script>
<style lang='scss'>
#upgrade {
  .icon-fanhui1 {
    display: none;
  }
  .com_button {
    margin-top: 230;
    width: 686px;
  }
  .navimg {
    width: 140px;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    img {
      display: block;
      margin-left: 42px;
      margin-top: 25px;
      width: 43px;
      height: 33px;
    }
  }
  .gradetop {
    padding: 10px 32px;
    box-sizing: border-box;
    margin-top: 20px;
    // width: 750px;
    height: 132px;
    background: rgba(255, 255, 255, 1);
    position: relative;
    p {
      line-height: 55px;
      font-size: 28px;
      color: #000000;
    }
    .mes {
      width: 44px;
      height: 44px;
      border-radius: 22px;
      background: rgba(10, 137, 172, 1);
      position: absolute;
      top: 40px;
      right: 32px;
      color: #fff;
      line-height: 44px;
      text-align: center;
    }
  }
  .grade {
    text-align: center;
    margin-top: 32px;
    background-color: #fff;
    .item {
      margin: 0px 30px;
      display: flex;
      color: #000;
      justify-content: space-between;
      border-bottom: 1Px solid rgba(238, 238, 238, 1);
      line-height: 102px;
      span {
        width: 200px;
        text-align: left;
      }
      input {
        width: 450px;
        // height: 52px;
        text-align: right;
        font-size: 30px;
        margin-right: 0;
        color: #000;
      }
      input:nth-of-type(3) {
        color: #b81919;
      }
      input::-webkit-input-placeholder {
        /* WebKit browsers */
        color: #999;
      }
      input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #999;
      }

      input::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #999;
      }

      input:-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: #999;
      }
    }
    .item1 {
      border-bottom: none;
      span {
        width: 500px;
      }
    }
    .shoukuanma {
      margin: 0 auto;
      width: 686px;
      // height: 356px;
      display: flex;
      justify-content: space-around;
      .box {
        width: 200px;
        max-height: 356px;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
    }
    .upload {
      margin: 0 auto;
      width: 240px;
      height: 240px;
      margin-top: 20px;
      border-radius: 6px;
      border: 1Px dashed #0a89ac;
      .yulan {
        width: 238px;
        height: 238px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      input {
        width: 10px;
        opacity: 0;
        filter: alpha(opacity=0);
      }
      .box {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        span {
          font-size: 24px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(10, 137, 172, 1);
          line-height: 80px;
        }
        .iconfont {
          font-size: 65px;
          color: #0a89ac;
        }
      }
    }
  }
}
</style>